
<template>
   
   <div >

      <!--<div @click="show()" style="margin: 0.6rem auto; width: 8rem;text-align: center;">{{year}}年{{month}}月<i class="iconfont icon-sanjiaoxing-down" style="color: #ffb553"></i></div>-->

      <!--<div style="width: 100%; height: 0.6rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>-->

      <group>

        <cell title="本月奖励金额">
            
            <div v-if="newList.length != 0" style="color: #ffb553; font-size:1rem">{{month_integral}}学分</div>
            <div v-else style="color: #ffb553; font-size:1rem">0学分</div>
           
        </cell>

     </group>

    
      <group v-if="newList.length != 0">

      <scroller lock-x   @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200" >

        <div v-for="(item,index) in newList" style="border-bottom: solid 1px #CBCBCB;">
          <cell :title="item.childnickname" >
	            <img slot="icon" style="display:block;margin-right:0.7rem;border-radius:20rem;width: 4rem;height: 4rem;" :src="item.childavatar">
	            <div style="color: #ffb553; font-size:0.9rem">
	            	<span class="iconfont icon-coin" style="margin-right: 0;"></span>
	            	<span>{{item.integral}}</span>
	            </div>
	            <div style="color: #7b7b7b;font-size:0.8rem">{{item.addtime}}</div>
	            
	        </cell>
          
        </div>
        <load-more tip="loading" v-if="loading"></load-more>
      </scroller>


      </group>

     <group>
       <popup-picker :show.sync="showPopupPicker" :show-cell="false" title="TEST" @on-change="change(value)" :data="[yearArr,monthArr]" v-model="value"></popup-picker>
     </group>
     <div v-if="newList.length == 0" style="margin: 1rem auto; width: 50%; text-align: center; color:#7b7a7a ">暂无更多内容！</div>  
  
   </div>

  
</template>

<script>
import {base64,DatetimeView,PopupPicker,XButton,Scroller,LoadMore} from 'vux'

export default {

  components: {

    PopupPicker,XButton,DatetimeView,Scroller,LoadMore,base64
    
  },
  data () {
    return {
      none:true,
      year:'2018',
      month:'01',
      yearArr:['2018', '2019', '2020', '2021', '2022'],
      monthArr:['1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11', '12'],
      bage: '8',
      index: 0,
      value:[],
      loading:false,
      bottomCount: 5,
      showPopupPicker:false,
      showList1: true,
      scrollTop: 0,
      onFetching: false,
      bottomCount: 5,

      info:'',
      month_integral:'',
      page:1,
      infoAll:'',
      access_token:'',
      newList:[],
    
    }
  },
  methods:{
     
     pick:function(){
       console.log(55);
     },
     change(val) {
       console.log('val change', val[0],val[1]);
       this.year = val[0];
       this.month = val[1];
    },
    show:function(){
       this.showPopupPicker=true;
    },
    
    //触底加载
    onScrollBottom:function(){
      
      if (this.onFetching) {
        // do nothing
      } else {
        
        
        
        console.log('开始')
        
        this.page = this.page + 1;
        
        console.log(this.page)
        
        this.getDetail();
        
        this.loading = true;
        
        
        
      this.onFetching = false
        setTimeout(() => {


//		        this.info = this.info.concat(this.info);
        this.onFetching = false
          console.log('结束')
          this.loading = false;
        }, 500)
        
      }
    },
    
    //获取详情
    getDetail(){
    	
    	this.$store.commit('updateLoadingStatus',true);
    	
    	this.$http.get(this.$store.state.api + 'userdd/get-integral&access_token=' + this.access_token + '&page=' + this.page)
	    .then((response) => {
	    		
	    console.log(response)
			
			if(response.body.code == 0) {
				
				this.info = response.body.data.list
				this.month_integral = response.body.month_integral
				
				for(var i = 0 ; i < response.body.data.list.length ; i ++){
					
					this.newList.push(this.info[i])
					
				}
//				this.infoAll= this.infoAll.concat(this.info)
				
			} else {
				
			}
				
			
			this.$store.commit('updateLoadingStatus',false);	
			
		}, (response) => {
             
            
            
		});
    
    },
    
    //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },	
    

    
  },
  
  mounted() {
  	
  	var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');

    this.getDetail();

  }


}


</script>


<style>

  .list{
    background: #fff;
    margin-bottom: 10px
  }
  .list_forward{
     padding: 0.8rem;

  }

 


</style>
